<style>
.pure_table_extra { width: 100%; margin-top: 5px; }
.pure_table_extra th { height: 25px; line-height: 25px; }
.pure_table_extra img { cursor: pointer; margin-right: 2px; }
.pure_table_extra td { vertical-align: middle; }
</style>

<?php
$data = $orm->get('pb_ecom_currency', NULL, NULL, NULL, NULL, NULL)->d;
if (count($data) == 0) {
  $rslt = unserialize(CURRS);
  $count = 0;
  foreach ($rslt as $idx => &$itm) {
    $obj = new stdClass();
    $obj->title = $idx;
    $obj->display_name = $idx;
    $obj->dollar_symbol = '';
    $obj->rate = $itm;
    $obj->is_default = ($count == 0) ? 1 : 0;
    $orm->add('pb_ecom_currency', $obj);
    $count++;
  }
}
?>

<div class="pure-form" style="display: none;">
  <input id="new_name" type="text" placeholder="{Currency}" onkeypress="if(event.which == 13) add_obj();">
  <input id="new_display" type="text" placeholder="{Display Name}" onkeypress="if(event.which == 13) add_obj();">
  <input id="new_dollar" type="text" placeholder="{Symobl e.g. $, ￥}" onkeypress="if(event.which == 13) add_obj();">
  <input id="new_rate" type="text" placeholder="{Rate}" onkeypress="if(event.which == 13) add_obj();">
  <button type="submit" class="pure-button pure-button-primary" onclick="add_obj();">Add Currency</button>
</div>
<table class="pure-table pure_table_extra" cellpadding=0 cellspacing=0>
  <thead>
    <tr>
      <th class="ui-widget-header">Currency</th>
      <th class="ui-widget-header" style="width: 120px;">Display Name</th>
      <th class="ui-widget-header" style="width: 120px;">Symbol</th>
      <th class="ui-widget-header" style="width: 120px;">Rate</th>
      <th class="ui-widget-header" style="width: 120px;">Default</th>
      <th class="ui-widget-header" style="width: 40px;">&nbsp;</th>
    </tr>
  </thead>
  <tbody id="data_body"></tbody>
</table>

<div id="dialog_change" class="pure-form pure-form-aligned " style="display: none;" title="Change Name">
  <div class="pure-control-group">
    <label>Currency</label>
    <input id="name_change" type="text" class="pure-input-1-2" placeholder="{Currency}" readonly="true"></input>
  </div>
  <div class="pure-control-group">
    <label>Display Name</label>
    <input id="display_change" type="text" class="pure-input-1-2" placeholder="{Display Name}"></input>
  </div>
  <div class="pure-control-group">
    <label>Symobl</label>
    <input id="dollar_change" type="text" class="pure-input-1-2" placeholder="{Symobl e.g. $, ￥}"></input>
  </div>
  <div class="pure-control-group">
    <label>Rate</label>
    <input id="rate_change" type="text" class="pure-input-1-2" placeholder="{Rate}"></input>
  </div>
</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  
  $(function() {
    reset();
    render();
  });

  function reset() {
    __data = __data.sort(function(a, b) {
      return a.title.localeCompare(b.title);
    });
    for (var idx in __data) {
      var itm = __data[idx];
      if (itm.is_default == 1) {
        __data.splice(idx, 1);
        __data.splice(0, 0, itm);
      }
    }
  };

  function render() {
    $('#new_name').val('');
    if (__data.length == 0) {
      $('#new_rate').hide();
      $('#new_rate').val('1');
    } else {
      $('#new_rate').show();
      $('#new_rate').val('');
    }
    
    render_data();
  };
  
  function render_data() {
    $('#data_body').empty();
    for (var idx in __data) {
      var itm = __data[idx];
      $('#data_body').append(
        '<tr class="' + ((idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd') + '">' + 
          '<td>' + itm.title + '</td>' +
          '<td>' + itm.display_name + '</td>' +
          '<td>' + itm.dollar_symbol + '</td>' +
          '<td>' + accounting.toFixed(itm.rate, 5) + '</td>' +
          '<td><input type="radio" name="rate_default" ' + ((itm.is_default == 1) ? 'checked="checked"' : '') + 'onclick="set_default(' + itm.id + ');"></input></td>' +
          '<td>' +
            '<span style="cursor: pointer; float: left;" class="ui-button-icon-primary ui-icon ui-icon-pencil" onclick="change_name(' + itm.id + ', event);"></span>' +
            '<span style="display: none;cursor: pointer; float: left;" class="ui-button-icon-primary ui-icon ui-icon-closethick" onclick="delete_obj(' + itm.id + ');"></span>' +
          '</td>' + 
        '</tr>'
      );
    }
    if (__data.length == 0) {
      $('#data_body').append('<tr class="pure-table-even"><td colspan=2>None</td></tr>');
    }
  };
  
  function delete_obj(id) {
    var req = Utils.get_by_id(id, __data);
    Ajax.request(
      __requrl + 'delete_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = rslt;
        reset();
        render();
      },
      { confirm: 1 }
    );
  };

  function add_obj() {
    var req = {
      title: $("#new_name")[0].value,
      display_name: $("#new_display")[0].value,
      dollar_symbol: $("#new_dollar")[0].value,
      rate: $("#new_rate")[0].value,
      is_default: (__data.length == 0) ? 1 :0
    };
    Ajax.request(
      __requrl + 'submit_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data[__data.length] = rslt;
        reset();
        render();
      },
      null
    );
  };

  function set_default(id) {
    for (var idx in __data) {
      var itm = __data[idx];
      itm.is_default = (itm.id == id) ? 1 : 0;
    }
    var req = Utils.get_by_id(id, __data);
    req.is_default = 1;
    Ajax.request(
      __requrl + 'set_default',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = rslt;
        reset();
        render();
      },
      null
    );
  };

  function change_name(id, ev) {
    var func = function() {
      var req = Utils.get_by_id(id, __data);
      req.title =$('#name_change')[0].value;
      req.display_name =$('#display_change')[0].value;
      req.dollar_symbol =$('#dollar_change')[0].value;
      req.rate = $('#rate_change')[0].value

      Ajax.request(
        __requrl + 'submit_obj',
        'req=' + Utils.encodeURI(JSON.stringify(req)),
        function(rslt) {
          reset();
          render();
          $('#dialog_change').dialog('close');
        },
        null
      );
    };
    
    $('#dialog_change').dialog({
      position: {
        my: 'left+0 bottom+0',
        of: ev.target
      },
      buttons: {
        'OK': function() {
          func();
        },
        'Cancel': function() { 
          $(this).dialog('close');
        }
      }
    });

    var obj = Utils.get_by_id(id, __data);

    $('#name_change')[0].onkeypress = function(ev) {
      if(ev.which == 13) {
        func();
      }
    };
    $('#display_change')[0].onkeypress = function(ev) {
      if(ev.which == 13) {
        func();
      }
    };
    $('#dollar_change')[0].onkeypress = function(ev) {
      if(ev.which == 13) {
        func();
      }
    };
    $('#rate_change')[0].onkeypress = function(ev) {
      if(ev.which == 13) {
        func();
      }
    };
    $('#name_change').val(obj.title);
    $('#display_change').val(obj.display_name);
    $('#dollar_change').val(obj.dollar_symbol);
    $('#rate_change').val(obj.rate);
    $('#rate_change').select();
  };
  /*]]>*/
</script>